import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import { Router, Route, Link } from 'yo-router'
import yoHistory from '$common/history';
import './index.scss';
import { Carousel } from '$yo-component';
import workData from './work.json';



class HomePage extends Component {
    render() {

        return (
            <div className="yo-flex">
                <Header title="首页" left={false} />
                <Scroller extraClass="flex">
                    <div className="m-content">
                        <Touchable touchClass="m-content-active" onTap={() => {
                            yoHistory.push('/skill');
                        }}>
                            <div>
                                <Carousel>
                                    <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
                                    <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
                                    <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
                                </Carousel>
                            </div>
                        </Touchable>
                    </div>
                     <div>
                            {
                                workData.map((item, index) =>
                                <div class="yo-card" className="bottompx" key={index}>
                                        <h3 className='titleh4'>{item.time}</h3>
                                        <p className="myex"><span>在职企业：</span>{item.name}</p>
                                        <p className="myex"><span>企业性质：</span>{item.category}</p>
                                        <p className="myex"><span>担任职务：</span>{item.ports}兼{item.reportto}</p>
                                        <p className="myex"><span>团队人数：</span>{item.peoples}</p>
                                        <p className="myex"><span>项目介绍：</span>{item.projects}</p>
                                    </div>
                                )
                            }
                        </div>
                </Scroller>

                <ul className="yo-tab yo-tab-view">
                    <li className="item item-y-ico item-on">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/skill');
                            }}
                        >
                            <div className='tabitem'>
                                首页
                  </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/skill');
                            }}
                        >
                            <div className='tabitem'>
                                技能
                          </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/project');
                            }}
                        >
                            <div className='tabitem'>
                                项目
    </div>
                        </Touchable>
                    </li>
                    <li className="item item-y-ico">
                        <Touchable
                            touchClass="touchable-highlight"
                            onTap={() => {
                                yoHistory.push('/minemy');
                            }}
                        >
                            <div className='tabitem'>
                                我的
</div>
                        </Touchable>
                    </li>
                </ul>
            </div>
        )
    }
}

export default HomePage;
